<template>
  <div class="login_confirm">
    <header>
      <div class="left" @click="back()">
        <i></i>
      </div>
      <div class="center">手机号登录</div>
    </header>
    <main>
      <div class="phone">
        <i></i>
        <input ref="phone" type="tel" placeholder="手机号" pattern="[0-9]*" maxlength="11" />
      </div>
      <div class="pwd">
        <i></i>
        <input ref="pwd" type="password" placeholder="密码" />
      </div>
      <button class="opc" @click="login()">登录</button>
      <router-link :to="{name:'ResetPwd'}" class="forget">忘记密码</router-link>
    </main>
    <v-alert v-show="alert_flag" :msg="msg"></v-alert>
  </div>
</template>
<script>
import vAlert from "@/components/alert";
export default {
  components: {
    vAlert
  },
  data() {
    return {
      msg: "",
      alert_flag: false
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    login() {
      let phone_reg = /^([1][3,4,5,6,7,8,9])\d{9}$/;
      let pwd_reg = /^[\w]{6,18}$/;

      let phone_val = this.$refs.phone.value;
      let pwd_val = this.$refs.pwd.value;

      if (!phone_reg.test(phone_val)) {
        this.msg = "手机号码格式不正确！";
        this.alert_flag = true;
        setTimeout(() => {
          this.alert_flag = false;
        }, 3000);
      } else if (!pwd_reg.test(pwd_val)) {
        this.msg = "密码只能是大小写字母、数字混合，6-18位";
        this.alert_flag = true;
        setTimeout(() => {
          this.alert_flag = false;
        }, 3000);
      } else {
        this.$store
          .dispatch("phone_confirm/getPhoneConfirmData", {
            phone: phone_val,
            countrycode: 86
          })
          .then(data => {
            if (data.code == 200 && data.exist != -1) {
              this.$store
                .dispatch("login/getLoginData", {
                  phone: phone_val,
                  password: pwd_val,
                  countrycode: 86
                })
                .then(
                  data => {
                    if (data.code == 200 && data.loginType == 1) {
                      this.$store
                        .dispatch("login_refresh/getLoginRefreshData", {})
                        .then(
                          data => {
                            this.$store
                              .dispatch("login_status/getLoginStatusData", {})
                              .then(
                                data => {
                                  this.$router.push({ name: "Home" });
                                },
                                data => {
                                  this.msg = "登录失败，请重试！";
                                  this.alert_flag = true;
                                  setTimeout(() => {
                                    this.alert_flag = false;
                                  }, 3000);
                                }
                              );
                          },
                          data => {
                            this.msg = "登录失败，请重试！";
                            this.alert_flag = true;
                            setTimeout(() => {
                              this.alert_flag = false;
                            }, 3000);
                          }
                        );
                    } else {
                      this.msg = "登录失败，请重试！";
                      this.alert_flag = true;
                      setTimeout(() => {
                        this.alert_flag = false;
                      }, 3000);
                    }
                  },
                  () => {
                    this.msg = "登录失败，请重试！";
                    this.alert_flag = true;
                    setTimeout(() => {
                      this.alert_flag = false;
                    }, 3000);
                  }
                );
            } else {
              this.msg = "该手机号尚未注册！";
              this.alert_flag = true;
              setTimeout(() => {
                this.alert_flag = false;
              }, 3000);
            }
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.login_confirm {
  height: 100%;
  width: 100%;
  main {
    .opc {
      position: relative;
    }

    .opc:focus {
      outline: none;
    }

    .opc:after {
      width: 100%;
      height: 100%;
      content: "";
      display: block;
      position: absolute;
      top: 0rem;
      left: 0rem;
      pointer-events: none;
      background-color: #666;
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 2rem;
      opacity: 0;
      transition: all 0.5s;
    }

    .opc:active:after {
      opacity: 0.3;
      transition: 0s;
    }
    .forget {
      display: inline-block;
      margin-top: 0.3rem;
      font-size: 0.36rem;
      text-decoration: underline;
      color: #999;
    }
    .phone {
      margin-top: 0.2rem;
      position: relative;
      i {
        position: absolute;
        top: 0.3rem;
        left: 0.3rem;
        background: url(../images/sj.png) no-repeat;
        background-size: 100% 100%;
        width: 0.5rem;
        height: 0.5rem;
        display: inline-block;
      }
      input {
        width: 90%;
        height: 1rem;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        border-bottom: 0.01rem solid #ccc;
        text-indent: 2em;
        font-size: 0.4rem;
      }
      input::placeholder {
        font-size: 0.4rem;
      }
    }
    .pwd {
      margin-top: 0.2rem;
      position: relative;
      i {
        position: absolute;
        top: 0.3rem;
        left: 0.3rem;
        background: url(../images/pwd.png) no-repeat;
        background-size: 100% 100%;
        width: 0.5rem;
        height: 0.5rem;
        display: inline-block;
      }
      input {
        width: 90%;
        height: 1rem;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        border-bottom: 0.01rem solid #ccc;
        text-indent: 2em;
        font-size: 0.4rem;
      }
      input::placeholder {
        font-size: 0.4rem;
      }
    }
    button {
      display: block;
      background-color: rgba(237, 73, 62, 1);
      border: 0;
      width: 90%;
      height: 1rem;
      border-radius: 2rem;
      font-size: 0.4rem;
      color: #fff;
      margin: auto;
      margin-top: 0.6rem;
    }
  }
  header {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    left: 0rem;
    top: 0rem;
    background-color: rgba(237, 73, 62, 1);
    overflow: hidden;
    position: relative;
    .left {
      position: absolute;
      top: 0.15rem;
      left: 0.2rem;
      i {
        background: url(../images/bck.png) no-repeat;
        background-size: 100% 100%;
        width: 0.5rem;
        height: 0.5rem;
        display: inline-block;
      }
    }
    .center {
      font-size: 0.4rem;
      color: #fff;
      text-align: center;
    }
  }
}
</style>